<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../assets/css/layui.css">
		<link rel="stylesheet" href="../assets/css/view.css" />
		<link rel="stylesheet" href="../assets/css/login.css">
		<script src="common.js" type="text/javascript"></script>
		<link rel="icon" href="/favicon.ico">
		<title>管理后台</title>
	</head>

	<body class="layui-view-body">
		<div class="layui-content">
			<div class="layui-page-header">
				<div class="pagewrap">
					<span class="layui-breadcrumb">
                  <a href="">首页</a>
                  <a href="">用户</a>
                  <a><cite>用户组</cite></a>
                </span>
					<h2 class="title">用户组</h2>
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="form-box">
							<div class="layui-form layui-form-item">

							</div>
							<button class="layui-btn layui-btn-blue addBtn"><i class="layui-icon">&#xe654;</i>新增</button>
							<table id="demo" lay-filter="useruv">

							</table>
							<script type="text/html" id="barDemo">
								<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
								<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
							</script>
						</div>
					</div>
				</div>
			</div>

			<div class="add-container" id="add-container">

				<form class="login-form">
					<div class="closeBtn">×</div>
					<div class="input-group">
						<input type="text" id="goodsTypeName" name="goodsTypeName" class="input-field goodsTypeName">
						<label for="goodsTypeName" class="input-label">
                    <span class="label-title">菜单名</span>
                </label>
					</div>
					<div class="input-group">
						<input type="text" id="goodsTypeDescription" name="goodsTypeDescription" class="input-field goodsTypeDescription">
						<label for="goodsTypeDescription" class="input-label">
                    <span class="label-title">备注</span>
                </label>
					</div>
					<button type="submit" class="login-button">确定<i class="ai ai-enter"></i></button>
				</form>
			</div>
		</div>
		<script src="../assets/layui.all.js"></script>
		<script>
			var element = layui.element;
			var table = layui.table;
			var form = layui.form;
			var $ = layui.$;

			$(".login-button").click(function() {
				var goodsTypeName = document.getElementById("goodsTypeName").value
				var goodsTypeDescription = document.getElementById("goodsTypeDescription").value
				if(goodsTypeName.trim() == '' || goodsTypeDescription.trim() == '') {
					alert("不能为空")
				}
				$.ajax({
					type: "post",
					url: webUrl+"/goodsType/add",
					dataTpye: "json",
					data: {
						'goodsTypeName': goodsTypeName,
						'goodsTypeDescription': goodsTypeDescription
					},
					async: false,
					success: function(data) {
						console.log(data)
                        $('.add-container').hide()
					},
					error: function (data) {
						console.log(data)
                    }
				});

			})
			$.ajax({
				type: "get",
				url: webUrl+"/goodsType/findAll",
				dataTpye: "json",
				success: function(data) {
					table.render({
						elem: '#demo',
						cols: [
							[ //标题栏
								//    {field: 'goodsTypeId', title: 'id', width: 80, sort: true}
								{
									checkbox: true,
									fixed: true
								}, {
									field: 'goodsTypeId',
									title: 'id',
									width: 280,
									sort: true,
									fixed: true
								}, {
									field: 'goodsTypeName',
									title: '一级分类名',
									width: 120
								}, {
									field: 'goodsTypeDescription',
									title: '备注',
									minWidth: 150
								}, {
									field: "delete",
									title: '操作',
									minWidth: 150,
									toolbar: "#barDemo"
								}
							]
						],
						data: data.content,
						skin: 'line' //表格风格
							,
						even: true,
						page: true //是否显示分页
							,
						limits: [5, 7, 10],
						limit: 5 //每页默认显示的数量
					});
				}
			});
			table.on('checkbox(useruv)', function(obj) {
				console.log(obj)
			});
			table.on('tool(useruv)', function(obj) {
				console.log(obj)
				var data = obj.data;
				if(obj.event === 'del') {
					layer.confirm('确认删除？', function(index) {
						obj.del();
						layer.close(index);
						$.ajax({
							type: "post",
							url: webUrl+"/goodsType/delete",
							dataTpye: "json",
							data: {
								'goodsTypeId': data.goodsTypeId
							},
							async: false,
							success: function(data) {
								alert(data.msg)
								window.onload()
							}
						});
					});
				} else if(obj.event === 'edit') {
					layer.alert('编辑行：<br>' + JSON.stringify(data))
				}

			});
			//展示已知数据
			$('.addBtn').click(function () {
				$('.add-container').fadeIn()
			})
		</script>
	</body>

</html>
